<template>
  <div class="card content-box">
    <div class="post">
      <div class="postList">
        <div class="postItem" v-for="(item, index) in postList" :key="item.postId" @click="_toForumDtl(index)">
          <div class="delBtn" @click="_delPost(index)">删除</div>
          <div class="postItem__comments">{{ item.commentNums }}</div>
          <div class="postItem__con">{{ item.postTitle }}</div>
          <div class="postItem__info">
            <div class="postItem__info__userName">{{ item.userName }}</div>
            <div class="postItem__info__createTime">{{ item.createTime }}</div>
          </div>
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="curPage"
        :total="total"
        v-if="postList?.length"
      />
      <div class="postEdit">
        <div class="postEditTitle">发表新帖</div>
        <div class="postTitle"><el-input type="text" placeholder="请输入新帖标题" size="large" v-model="postTitle" /></div>
        <WangEditor v-model:value="postContent" mode="simple" height="200px" />
        <el-button class="submitBtn" type="primary" @click="_submit">发表</el-button>
      </div>
    </div>

    <!-- <el-button type="primary" @click="dialogVisible = true"> 内容预览 </el-button> -->
    <el-dialog v-model="dialogVisible" title="富文本内容预览" width="1300px" top="50px">
      <div class="view" v-html="postContent"></div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="wangEditor">
import { onMounted, ref, watch } from "vue";
import WangEditor from "@/components/WangEditor/index.vue";
import { getPostList, sendPost, deletePost } from "@/api/modules/forum";
import { ResultData } from "@/api/interface";
import { ElMessage } from "element-plus";
import router from "@/routers";

const postTitle = ref("");
const postList: any = ref([]);
const postContent = ref("");
const curPage = ref(1);
const total = ref(0);
const dialogVisible = ref(false);
/**
 * 删帖
 */
const _delPost = (index: number) => {
  deletePost({ postId: postList.value[index].postId }).then(() => {
    getPostData();
  });
};
/**
 * 提交新帖
 */
const _submit = async () => {
  if (!postTitle.value) {
    ElMessage.error("请输入新帖标题");
    return false;
  } else if (!postContent.value) {
    ElMessage.error("新帖内容不能为空");
    return false;
  }
  await sendPost({ postTitle: postTitle.value, postContent: postContent.value }).then(() => {
    getPostData();
    postTitle.value = "";
    postContent.value = "";
  });
};
/**
 * 跳转到论坛详情
 */
const _toForumDtl = (index: number) => {
  router.replace(`/forumDtl/${postList.value[index].postId}`);
};
/**
 * 获取帖子列表
 */
const getPostData = async () => {
  const { result } = (await getPostList({ pageNum: curPage.value, pageSize: 10 })) as ResultData;
  postList.value = result.dataList;
  total.value = result.total;
};
watch(
  () => curPage.value,
  () => {
    getPostData();
  }
);
onMounted(async () => {
  getPostData();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
